<template>
  <div class="presale">
    <div class="body">
      <div class="img-content">
        <img src="../../assets/imgs/NFT_1.png" />
      </div>
      <div class="price-content">
        <div class="price-amount">
          <div>
            <p class="price">Price: {{ props.data.price }}</p>
            <p class="amount">Amount: {{ props.data.amount }}</p>
          </div>
          <div class="lev">
            <img src="../../assets/imgs/NFT_lev_1.png" />
          </div>
        </div>
        <div class="purchase-content">
          <div class="purchase">购买</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <img src="../../assets/imgs/tips.png" />
      <span class="tips">每个地址最多购买一个</span>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'

const props = defineProps({
  data: Object
})

const emits = defineEmits(['planEvent'])
const handleEvent = () => {
  emits('planEvent', props.data)
}
</script>

<style scoped lang='scss'>
.presale {
  border: 1px solid rgb(68, 78, 104);
  border-radius: 0.5rem;
  background: rgb(20, 22, 30);
  padding: 0.5rem;
  .body {
    display: flex;
    gap: 1rem;

    .img-content {
      flex: 3;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .price-content {
      flex: 7;
      .price-amount {
        display: flex;
        justify-content: space-between;
        p {
          line-height: 2rem;
          font-size: 0.75rem;
        }
        .price {
          font-size: 0.875rem;
        }
        .amount {
          color: rgb(152, 157, 170);
        }
        .lev {
          align-self: center;
          width: 1.2rem;
          img {
            width: 100%;
          }
        }
      }
      .purchase-content {
        .purchase {
          background: rgb(152, 157, 170);
          color:#fff;
          text-align: center;
          border-radius: 0.375rem;
          height: 1.5rem;
          line-height: 1.5rem;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
  .bottom {
    border-top: 1px solid rgb(70, 72, 97);
    margin-top: 0.4rem;
    line-height: 1rem;
    img {
      width: 1rem;
      vertical-align: middle;
    }
    .tips {
      color: rgb(134, 138, 174);
      font-size: 0.75rem;
      vertical-align: middle;
      margin-left: 0.5rem;
    }
  }
}
</style>